La etiqueta span la utilizamos para dar estilo sin necesidad de recurrir a CSS, algo similar ocurre con la etiqueta div pero esta última crea un bloque. Un ejemplo de etiqueta div sería el siguiente <div >
Este texto es de color rojo
</div> He escrito todo en la misma línea sin embargo la etiqueta div añade espacios en blanco en sus extremos.Si probamos a editar de nuevo un post nos encontraremos que se ha alterado el orden de lo que habíamos escrito y la etiqueta div ha creado saltos de línea.Ahora el ejemplo con la etiqueta span <span > Este otro también es rojo pero soy span y mi etiqueta es más ordenada </span> ¿Qué tal ahora? la etiqueta span no altera nada, se sitúa en la misma línea y sólo cambia si le añadimos estilos.
Ese ejemplo nos demuestra que para darle estilos a un texto la etiqueta span es mucho más manejable, al igual que añadimos color también podemos escoger el tipo de fuente:
Soy fuente comic y color orangered <span style=";font-family:comic sans ms;color:orangered;" >Soy fuente comic y color orangered </span>
Soy fuente comic,color orangered y de mayor tamaño
<span style=";font-family:comic sans ms;font-size:16px;color:orangered;" >Soy fuente comic,color orangered y de mayor tamaño </span>
» Cada vez que añadimos un estilo lo separamos por comillas como esta ;
Si añadimos con frecuencia cualquier tipo de estilos puede resultar algo molesto. Nos resultará más sencillo si esos estilos los trasladamos a la plantilla.
Los estilos se añaden como su nombre indica en la hoja de estilos conocida como CSS. En nuestra plantilla los ubicaremos en el espacio comprendido entre <head> y </head> para evitar cometer algún error yo siempre aconsejo añadir los estilos justo antes de ]]></b:skin> y precisamente ahí es donde añadiremos una clase para esos estilos a la que llamaremos span.
.span{
color: orangered;
font-family: comic sans ms;
font-size: 16px;
}
Guardamos los cambios y hacemos la prueba en una entrada:
<span class="span">Aquí añadimos cualquier texto</span>
Simplemente añadiendo el nombre de la clase en este caso span nuestro texto adquiere los estilos definidos para esa clase.
El juego con la etiqueta span puede ser tan divertido como nosotros estemos dispuestos a que lo sea.
El juego con la etiqueta span puede ser tan divertido como nosotros estemos dispuestos a que lo sea.
Añadimos dos clases una para cada color y a cada una de esas clases le añadimos estilos.
.color-rojo {
color:#940f04;
font-size:54px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
.color-negro {
color:#000;
font-size:34px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
Podemos continuar añadiendo un efecto hover donde el color de la fuente se invierta
.color-rojo:hover {
color:#000;
font-size:54px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
.color-negro:hover {
color: #940f04;
font-size:34px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
Podemos seguir jugando pero será otro día
Esto queda muy lindo Gem@. Además creo que es una muy buena opción para los titulos!.
Saludos cordiales :D.
Como dice Birdelo, para títulos biene genial :-D además que también podría servir para pullquotes ;) un abrazo0 Gema! :D
Hola Gema! gracias x los tips, muchos me sirvieron para mi blog, sacándolos de aquí y de allá y mas allá...
PD: Como se podría usar este tipo de letras en degrade para los títulos de las entradas?, intente y no me salió :P
Gema te quiero agradecer por todo lo que has hecho por mi es que de verdad sin ti mi blog no tendria todo lo bno que tiene ahora, si hubiera una votacion por el blog que mas ayuda este seria mi favorito. te lo agradezco :)
Saludos Birdelo, me alegra que te guste :)
yz Otro abrazo para ti Jaime :)
yz Ki es largo para explicar en una entrada pero si me das algo de tiempo lo postearé :)
yz Peliculas y TV me vas a poner colorada, tu blog tiene una plantilla preciosa y el resto lo fuiste haciendo tu ;)
Genial gracias por explicar lo del DIV yo tenia ese problem pero pense que era algo que yo estaba haciendo mal. Creo que la mejor solucion es la etiqueta Span, gracias por el tip
Me alegra que te fuera útil Henry :)
Hola Gema muy bueno el post y tu blog tienes muchas utilidades ;) Saludos.
PD:En el primer ejemplo de los colores has puesto Gema Blog con dos "b".
Me alegra que te guste Raquel, gracias por avisarme del error ¿por qué nadie me lo diría antes? :S
Queda rectificado ;)
Pues nose...jeje
gema necesito ayuda, mis neuronas no dan mas, no se que pasa pero estoy intentando poner una plantilla en blogger de blogcrowds.com/ y no puedo, una plantilla que se llama summer, esta aca :http://www.blogcrowds.com/resources/view_template.php/summer_61, imposible que me quede bien, yo creo que es de dos columnas, copio el codigo html y lo pego en blogspot y cuando voy a diseño no aparece "Añadir un gadget", esa columna no aparece,en el demo sale Label pero en blogspot no, no se que mas hacer, ¡¿podes decirme si hay alguna solucion?
te lo agradezco enormemente
besos
estela
Hola..Como siempre fantástico, Gem@..Saludos desde elrastreador...
yz el secreto se protege solo intenta añadirla a un blog de pruebas para descartar que no es problema del blog sino de la plantilla.
yz Gracias emigasei67 :)
gracais gema , pero no hay caso lo intente de todas las formas conocidas por mi y no se que pasa, tal vez es como decis vos que la plantilla este mal. la deje y puse otra que es muy linda tambien.
besos
estela
yz El secreto se protege solo, si añadiste otra sin problemas sin duda el problema era la plantilla Yo no pude ver ese problema porque no veía la forma de copiar la plantilla completa (creo que ese era el problema) ;)
si,es eso que decis, no se podia copiar completa.
gracias como siempre gema
sigo participando =-)
yz Gracias a ti el secreto se protege solo :)
hola gem@!! no estoy muy segura de si lo habías publicado o no: necesito marcar un texto como si lo marcase con rotulador fluorescente... ¿sabes cuál es el código? gracias adelantadas. bsos
yz FL eso puedes hacerlo en el editor de entradas si accedes por http://draft.blogger.com/ :)
Hola.
Quisiera saber cómo poner en mi blog (pmluzonux.blogspot.com) un RSS/FEED en donde saliesen los lectores que tiene mi página (más o menos como lo que tienes arriba a la derecha).
Por cierto, tengo cuenta en FeedBurner.
Saludos, y gracias. Buen blog!!!
:: PML88 en tu cuenta de FeedBurner, la pestaña de Publicize y luego FeedCount allí puedes personalizar tu botón y conseguir el código para añadir a tu blog :)
es un gran aporte el que has hecho, pero como recomendación (de diseñador gráfico) jamás uses un comic sans ni si quiera para ejemplos, es de las peores tipografías que podrían existir.
:: Me alegra mucho tu comentario Unknown y es cierto que he leído sobre lo que dices pero nadie me aclara por qué ese digamos "desprecio" hacia la comic. Ojalá tengas suscripción del comentario y nos respondas :)
Nota: solo los miembros de este blog pueden publicar comentarios.